<template>
  <div>
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <el-button style="float: left;" type="primary" @click="addPage">添加页面</el-button>
        <el-button style="float:right" @click="searchFn">筛选</el-button>
        <el-input v-model="pageConfig.title_contains" style="width:30% ; float:right" placeholder="请输入关键字" />
      </div>
      <template>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="title"
            label="标题"
            width="180"
            style="width:33%"
          />
          <el-table-column
            prop="content"
            label="内容"
            style="width:33%"
          />
          <el-table-column
            label="操作"
          >
            <template v-slot="obj">
              <el-button type="primary" @click="editPage(obj.row.id)">编辑</el-button>
              <el-button type="danger" @click="delPage(obj.row.id)">删除</el-button></template>
          </el-table-column>
        </el-table>

      </template>
      <!-- 分页组件 -->
      <div class="block">
        <el-pagination
          layout="prev, pager, next"
          :page-size="pageConfig._limit"
          :total="total"
          :pager-count="5"
          @current-change="pageChange"
        />
      </div>
    </el-card>
    <!-- 弹出框 -->
    <el-dialog
      :visible="dialogVisible"
      :title="formData.id?'编辑页面':'添加页面'"
      @close="cancelFn"
    >
      <el-form ref="addPage" :model="formData" :rules="rules">
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title" />
        </el-form-item>
        <el-form-item label="内容" prop="content">
          <!-- 使用富文本 -->
          <wangEnduit
            v-model="Content"
            :is-clear="isClear"
            :value="Content"
            @change="change"
          />
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancelFn">取 消</el-button>
        <el-button type="primary" @click="btnFn">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getPageList, getUserPage, addPage, delPage, editPage, getPageSum } from '@/api/pages'
import wangEnduit from '@/components/wangEnduit'
export default {
  // 引入富文本之后注册
  components: {
    wangEnduit
  },
  data() {
    return {
      pageConfig: {
        _limit: 3,
        _start: 0,
        title_contains: ''
      },
      total: 0,
      Content: '', // 富文本内容
      isClear: false,
      pageList: [], // 页面列表
      // _limit: 2, // 获取的最大条数
      dialogVisible: false,
      tableData: [],
      formData: {
        title: '',
        content: ''
      },
      rules: {
        title: [{ required: true, message: '标题不能为空' }],
        content: [{ required: true, message: '内容不能为空' }]
      }
    }
  },
  async created() {
    // 获取所有页面列表
    this.getPageListFn()
    // 获取页面数量
    this.getPageSum()
  },
  methods: {
    // 搜索
    searchFn() {
      this.getPageListFn({ ...this.pageConfig })
    },
    // 点击页码更新
    pageChange(newPage) {
      this.pageConfig._start = (newPage - 1) * this.pageConfig._limit
      this.getPageListFn()
    },
    // 富文本改变时触发的函数
    change(val) {
      console.log('val', val)
    },
    // 点击确定
    async btnFn() {
      // 获取富文本内容
      this.formData.content = this.Content
      // 校验表单
      await this.$refs.addPage.validate()
      // 发送请求
      // 判断是否有id
      if (this.formData.id) {
        // 有则调用编辑接口函数
        await editPage({ ...this.formData })
        console.log(this.formData.content)
      } else {
        // 没有则调用添加接口函数
        console.log(this.formData)
        await addPage({ ...this.formData })
      }
      // 提醒用户
      this.$message.success('添加成功')
      // 关闭弹窗
      this.dialogVisible = false
      // 更新页面
      this.getPageListFn()
    },
    // 点击取消
    cancelFn() {
      this.formData = {
        title: '',
        content: ''
      }
      this.Content = ''
      this.dialogVisible = false
    },
    // 获取所有页面列表
    async getPageListFn() {
      const res = await getPageList({ ...this.pageConfig })
      this.pageList = res
      this.tableData = res.data
      console.log(102, this.pageList)
    },
    // 获取页面数量
    async getPageSum() {
      const res = await getPageSum()
      // console.log(162, res)
      this.total = res.data
      // console.log(this.total)
    },
    // 点击添加页面按钮
    addPage() {
      // 弹出弹框
      this.dialogVisible = true
    },
    // 点击编辑按钮
    async editPage(id) {
      // 根据id获取页面列表
      const res = await getUserPage(id)
      // 把数据保存起来（数据回显）
      this.formData = res.data
      // 弹出弹框
      this.dialogVisible = true
      // 富文本回显
      this.Content = this.formData.content
    },
    // 点击删除
    async delPage(id) {
      // 二次确认
      await this.$confirm('是否确认删除')
      // 发送请求
      await delPage(id)
      // 成功提示
      this.$message.success('删除成功')
      // 更新页面
      this.getPageListFn()
    }
  }

}
</script>
<style>
.box-card{
    margin: 20px;
    padding: 20px;
}
.el-card__header{
    padding: 18px 0;
}
.block{
 text-align: center;
}
</style>
